<template>
  <div class="app-container">
    <el-form :inline="true" v-show="showSearch" :model="form" class="demo-form-inline">
      <el-form-item label="创客账号：">
        <el-input
          v-model.trim="form.mobile"
          placeholder="请输入"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="提现状态：">
        <ApiSelect v-model:modelValue="form.withdrawalStatus" :options="withdrawalStatusOptions" />
      </el-form-item>
      <el-form-item label="创客类型：">
        <ApiSelect v-model:modelValue="form.creatorType" :options="creatorTypeOptions" />
      </el-form-item>
      <el-form-item label="选择日期：">
        <el-date-picker
          v-model="form._date"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="YYYY/MM/DD"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="&nbsp;">
        <el-button @click="reset()">重置</el-button>
        <el-button type="primary" @click="handleQuery()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8" justify="end">
      <el-button v-hasPermi="['fund:withdrawal:export']" type="primary" @click="handleExport(true)"
        >批量导出筛选数据</el-button
      >
    </el-row>
    <el-row :gutter="10" class="mb8">
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="list">
      <el-table-column label="创客名称" align="center" prop="nickName" />
      <el-table-column label="创客账号" align="center" prop="userName" />
      <el-table-column label="创客类型" align="center" prop="type" />
      <el-table-column label="提现金额" align="center" prop="money" />
      <el-table-column label="提现状态" align="center" prop="status">
        <template #default="{ row }">
          <el-button
            :type="withdrawalStatusOptions.find((ev) => ev.value === row.status).type"
            link
          >
            {{ withdrawalStatusOptions.find((ev) => ev.value === row.status).label }}
          </el-button>
        </template>
      </el-table-column>

      <el-table-column label="申请时间" align="center" prop="applyTime" />
      <el-table-column label="提现详情" align="center" prop="createBy">
        <template #default="{ row }">
          <el-button
            v-hasPermi="['fund:withdrawal:details']"
            link
            type="primary"
            @click="details(row)"
          >
            详情
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="250">
        <template #default="{ row }">
          <div v-if="row.status === 2">
            <el-button
              v-hasPermi="['fund:withdrawal:approved']"
              link
              type="success"
              @click="Audit(true, row)"
            >
              审核通过
            </el-button>
            <el-button
              v-hasPermi="['fund:withdrawal:refused']"
              link
              type="danger"
              @click="Audit(false, row)"
            >
              审核拒绝
            </el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="拒绝原因" align="center" prop="remark" width="250" />
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList()"
    />

    <el-dialog
      v-model="_dialog"
      :close-on-click-modal="false"
      title="提现详情(分账订单)"
      destroy-on-close
    >
      <el-button @click="handleExport(false)">批量导出筛选数据</el-button>
      <el-table :data="dialogList">
        <el-table-column property="orderSn" label="订单编号" align="center" width="200" />
        <el-table-column property="payMoney" label="交易金额" align="center" width="80" />
        <el-table-column property="proportion" label="分账比例" align="center" width="80" />
        <el-table-column property="feeRate" label="交易手续费" align="center" width="120" />
        <el-table-column property="orderTime" label="交易时间" align="center" width="200" />
        <el-table-column property="payStatus" label="订单状态" align="center" width="80" />
        <el-table-column property="money" label="分账金额" align="center" width="150" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup>
import { getCashListApi, postAuditApi, getCashDetailsApi } from '@/api/fund/withdrawal'
import { parseTime } from '@/utils/tools'

const { proxy } = getCurrentInstance()
const { order_stat_options } = proxy.useDict('order_stat_options')

const withdrawalStatusOptions = ref([
  { value: 1, label: '审核拒绝', type: 'danger' },
  { value: 2, label: '待审核', type: 'warning' },
  { value: 3, label: '审核通过', type: 'success' },
  { value: 4, label: '已完成', type: 'success' }
])
const creatorTypeOptions = ref([
  { label: `创客-特约商户`, value: 1 },
  { label: `创客-普通商户`, value: 2 },
  { label: `创客-个人`, value: 3 },
  { label: `创客-服务商`, value: 4 }
])
const showSearch = ref(true)
const list = ref([])
const dialogList = ref([])
const form = ref({
  withdrawalStatus: '',
  creatorType: '',
  mobile: '',
  _date: []
})
const loading = ref(false)
const _dialog = ref(false)
const total = ref(0)
const queryParams = ref({
  pageNum: 1,
  pageSize: 10
})
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

/**重置数据页码为 0  */
function reset() {
  form.value.withdrawalStatus = ''
  form.value.creatorType = ''
  form.value.mobile = ''
  form.value._date = []
  queryParams.value.pageNum = 1
  queryParams.value.pageSize = 10
  getList()
}
/** 导出数据 */
function handleExport(type) {
  if (type) {
    const _param = {
      userName: form.value.mobile,
      status: form.value.withdrawalStatus,
      type: form.value.creatorType,
      startTime: form.value._date[0],
      endTime: form.value._date[1]
    }
    proxy.download(
      '/operation/withdraw/history/management/list/export',
      { ..._param },
      `提现列表${new Date().getTime()}.xlsx`
    )
  } else {
    proxy.download(
      '/operation/withdraw/history/management/info/export',
      { userWithdrawId: userWithdrawId.value },
      `提现详情列表${new Date().getTime()}.xlsx`
    )
  }
}
/**获取提现 list 数据 */
function getList() {
  loading.value = true
  const _param = {
    ...queryParams.value,
    userName: form.value.mobile,
    status: form.value.withdrawalStatus,
    type: form.value.creatorType,
    startTime: form.value._date[0],
    endTime: form.value._date[1]
  }
  console.log(_param)
  getCashListApi(_param).then((res) => {
    loading.value = false
    if (res.data && res.data.rows) {
      total.value = res.data.total
      list.value = res.data.rows.map((item) => {
        return {
          ...item,
          applyTime: parseTime(item.applyTime),
          type: creatorTypeOptions.value.find((ev) => ev.value == item.type)?.label || ''
        }
      })
      console.log(list.value)
    }
  })
}
/** 触发-审核接口 */
function Audit(type, row) {
  if (type) {
    ElMessageBox.confirm('审核通过二次确认', {
      confirmButtonText: '确认通过',
      cancelButtonText: '取消',
      type: 'warning',
      center: false
    }).then(() => {
      postAuditApi({ id: row.id, status: 3 }).then((res) => {
        if (res.code === 200) {
          ElMessage.success('审核通过成功')
          getList()
        }
      })
    })
  } else {
    ElMessageBox.prompt('审核拒绝二次确认', {
      confirmButtonText: '确认拒绝',
      cancelButtonText: '取消',
      type: 'warning',
      center: false,
      inputPlaceholder: '请输入备注(最大15字)',
      inputValidator: (val) => {
        if (!val) return '请输入拒绝原因'
        if (val.length > 15) return '拒绝原因不能超过15个字符'
      }
    }).then(({ value }) => {
      postAuditApi({ id: row.id, status: 1, remark: value }).then((res) => {
        if (res.code === 200) {
          ElMessage.success('审核拒绝成功')
          getList()
        }
      })
    })
  }
}

const userWithdrawId = ref()
/**
 * 跳转进详情弹出层
 * @param item 每一条数据
 */
function details(row) {
  _dialog.value = true
  userWithdrawId.value = row.id // 赋值用于导出
  getCashDetailsApi({ userWithdrawId: row.id }).then((res) => {
    if (res && res.data) {
      dialogList.value = res.data.map((item) => {
        console.log(item)
        return {
          ...item,
          proportion: item.proportion + '%',
          feeRate: item.feeRate + '%',
          orderTime: parseTime(item.orderTime),
          payStatus: order_stat_options._object.order_stat_options.find(
            (ev) => ev.value == item.payStatus
          ).label
        }
      })
    }
  })
}

getList()
</script>

<style lang="scss">
.el-input {
  width: 215px;
}
</style>
